<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-container clearfix">
            <nav class="">
                <div style="overflow:hidden; z-index: inherit;" class="navbar king-horizontal-nav1  f14">
                    <div class="navbar-container">
                        <div class="navbar-header pull-left">
                            <a class="navbar-brand" href="javascript:;">
                                <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" class="logo"> </a>
                        </div>
                        <ul class="nav navbar-nav pull-left m0">
                            <li class="active"><a href="{{ SITE_URL }}">首页</a></li>
                        </ul>
                        <div class="navbar-header pull-right">
                            <ul class="nav">
                                <li class="user-info">
                                   
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="panel panel-success mb0">
                <div class="panel-heading"> 题库管理 </div>
                <div class="panel-body">
                    <form class="form-vertical p15">
                        <div class="form-group">
                            <button type="button" class="king-btn mr10  king-success">试题新增</button>
                            <button type="button" class="king-btn king-default ">试题刷新</button>
                        </div>
                        <table class="table mb0 pr15 ranger-box2  ">
                            <thead>
                                <tr>
                                    <th style="width: 70px;">#</th>
                                    <th style="width: 15%;">名称</th>
                                    <th style="width: 15%;">位置</th>
                                    <th style="width: 15%;">日期</th>
                                    <th style="width: 15%;">类型</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width: 70px;">1</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 70px;">2</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 70px;">3</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 70px;">4</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 70px;">5</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 70px;">6</td>
                                    <td style="width: 15%;">Ravi Kumar</td>
                                    <td style="width: 15%;">India</td>
                                    <td style="width: 15%;">23/12/2012</td>
                                    <td style="width: 15%;">Paid</td>
                                    <td>
                                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <template id="header_tpl_16191476906892">
                            <tr>
                                <th style="width: 70px;">#index#</th>
                                <th style="width: 15%;">#name#</th>
                                <th style="width: 15%;">#position#</th>
                                <th style="width: 15%;">#date#</th>
                                <th style="width: 15%;">#type#</th>
                                <th>操作</th>
                            </tr>
                        </template>
                        <template id="tpl_16191476906892">
                            <tr>
                                <td style="width: 70px;">#index#</td>
                                <td style="width: 15%;">#name#</td>
                                <td style="width: 15%;">#position#</td>
                                <td style="width: 15%;">#date#</td>
                                <td style="width: 15%;">#type#</td>
                                <td>
                                    <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                                    <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                                    <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                                </td>
                            </tr>
                        </template>
                        <!-- 设置面板End -->
                    </form>
                </div>
            </div>
            <div class="panel panel-success mb0">
                <div class="panel-heading"> 试卷管理 </div>
                <div class="panel-body">
                    <form class="form-vertical p15">
                        <div class="form-group">
                            <button type="button" class="king-btn mr10  king-success">试卷生成</button>
                            <button type="button" class="king-btn king-default ">试卷销毁</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-success mb0">
                <div class="panel-heading"> 考试管理 </div>
                <div class="panel-body">
                    <form class="form-vertical p15">
                        <div class="form-group">
                            <button type="button" class="king-btn mr10  king-success">考试成绩查询</button>
                            <button type="button" class="king-btn king-default ">模拟考试</button>
                        </div>
                    </form>
                </div>
            </div>
            <form class="form-horizontal">
                <section>
                    <div class="form-group clearfix">
                        <div class="col-sm-offset-3 col-sm-9">
                            <div class="bk-horizontal-line"></div>
                        </div>
                    </div>
                </section>
                <div class="panel panel-success mb0">
                    <div class="panel-heading"> 考生考试 </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <button type="button" class="king-btn mr10  king-success">考试开始</button>
                            <button type="button" class="king-btn king-default ">取消</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function(){
                function renderTpl(str, cfg) {
                    var re = /(#(.+?)#)/g;

                    return str.replace(re, function() {
                        var val = cfg[arguments[2]]+'';
                        if(typeof val == 'undefined') {
                            val = '';
                        }
                        return val;
                    });
                }

                // 异步请求后台数据
                $.ajax({
                    url: 'https://magicbox.bk.tencent.com/static_api/v3/components/table7/data.json',
                    type: 'GET',
                    success: function(res){
                        var _html = ' ';
                        var list = res.items;
                        var tpl = $('#tpl_16191476906892').html();
                        var headerTpl =  $('#header_tpl_16191476906892').html();
                        for (var i=0,len=list.length; i < len; i++){
                            var item = list[i];
                            _html += renderTpl(tpl, item)
                        }
                        $('.ranger-box2 tbody').html(_html);
                        $('.ranger-box2 thead').html(renderTpl(headerTpl,res.catalogues));
                    }
                });
            });
    </script>
</body>

</html>